<!-- SPDX-License-Identifier: GPL-3.0-or-later
License: GNU GPLv3 or later. See the license file in the project root for more information.
Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Sigma file manager | Error</title>
  </head>
  <style>
    body {
      margin: 0;
      font-family: 'Roboto', 'Noto Sans';
    }

    .error__header {
      display: flex;
      align-items: center;
      padding: 0 24px;
    }

    .error__title {
      margin: 0;
      font-size: 24px;
    }

    .error__description {
      margin: 24px;
    }

    .error__stack__code {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: 12px;
    }

    .error__stack {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 24px;
      word-break: break-word;
    }

    a {
      text-decoration: none;
      font-weight: bold;
      color: #627694;
    }
    
    button {
      margin-bottom: 16px;
      padding: 4px 12px;
      border: 1px solid #627694;
      color: #627694;
      font-size: 12px;
      text-transform: uppercase;
      border-radius: 4px;
      font-weight: bold;
      user-select: none;
      cursor: pointer;
    }

    button:active {
      background-color: rgba(0, 0, 0, 0.08);
    }
  </style>
  <body>
    <div class="error">
      <div class="error__header">
        <img src="./icons/logo-1024x1024.png" width="64px" height="64px">
        <div class="error__description">
        <h2 class="error__title"></h2>
          <div>
            You can report the error shown below by opening a new issue on the project's page on Github:
            <a class="repo-issues-link" onclick="openIssuesPage()"></a>
          </div>
        </div>
      </div>
      <div class="error__stack">
        <button onclick="copyError()">copy</button>
        <div class="error__stack__code"></div>
      </div>
    </div>
    <script>
      const electron = require('electron')
      let data = {}
      electron.ipcRenderer.on('data:errorWindow', (event, payload) => {
        data = payload
        document.querySelector('.error__title').innerHTML = payload.title
        document.querySelector('.error__stack__code').innerHTML = payload.error.stack
        document.querySelector('.repo-issues-link').href = payload.githubIssuesLink
        document.querySelector('.repo-issues-link').innerHTML = payload.githubIssuesLink
      })

      function openIssuesPage () {
        electron.shell.openExternal(data.githubIssuesLink)
      }

      function copyError () {
        electron.clipboard.writeText(data.error.stack)
      }
    </script>
  </body>
</html>
